<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tradesmen Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--Bootstrap css file-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
	
	<div class="container">
	
		<div class="admin-bar">
			<div class="row">
				<div class="span3">
					<div class="logo">
						<a href="index.html"><img src="http://placehold.it/280x100"/></a>
					</div>
				</div>
				<div class="span7">
					<form class="well form-search">
						<input type="text" class="input-xlarge search-query" placeholder="Search for tradesman..." />
						<input type="text" class="input-large search-query" placeholder="Town/City or Postcode" />
						<a type="submit" class="btn btn-primary main-search-button" href="search.html">Search</a>
					</form>
				</div>
				<div class="span2">
					<div class="admin-buttons well">
						<div class="btn-group">
							<button class="btn account-button">My Account</button>
							<button class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a class="#" data-toggle="modal" href="#myModal" >Log In</a></li>
								<li><a href="#">Settings</a></li>
								<li class="divider"><li>
								<li><a href="#">Log Out</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<nav>
			<div class="row">
				<div class="span12">
					<div class="navbar">
						<div class="navbar-inner">
							<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
							<a class="btn btn-navbar home-button" href="index.html"><i class="icon-home icon-white"></i></a>
							<div class="nav-collapse">
								<ul class="nav">
									<li><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
									<li class="divider-vertical"></li>
									<li><a href="howitworks.html"><i class="icon-wrench icon-white"></i> How it Works</a></li>
									<li class="divider-vertical"></li>
									<li><a href="directory.html"><i class="icon-book icon-white"></i> Trade Directory</a></li>
									<li class="divider-vertical"></li>
									<li><a href="review.html"><i class="icon-pencil icon-white"></i> Leave a Review</a></li>
									<li class="divider-vertical"></li>
									<li><a href="contact.html"><i class="icon-envelope icon-white"></i> Contact Us</a></li>
									<li class="divider-vertical"></li>
									<div class="navbar-search pull-right">
										<input type="text" class="search-query" placeholder="Search">
									</div>
								</ul>
							</div><!--nav-collapse-->
						</div>
					</div>
				</div>
			</div>
		</nav>

		<section>
			<div class="row">
				<div class="span6">
					<div class="how-it-works well">
						<h2>How it works for customers..</h2><br/>
						<div class="how-it-works-step">
							<h4>Step 1: Search for a Tradesmen</h4>
							<p>Enter your search criteria for a required tradesman (e.g Plumbers in Wembley). Alternatively you can go to our trade directory section and make a selection from there.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 2: Select Tradesman</h4>
							<p>Using your search results, filter your list to find the tradesman which best suits you. Depending on how much detail the tradesperson has included, you may view each tradesman's profile and ratings, including a list of their qualifications and a photo portfolio of their previous work.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 3: Contact Tradesman</h4>
							<p>Once you have selected your tradesmen, you should contact them via whichever way suits you best to discuss your job. Most tradesmen will have an email address or direct line where you can contact them. Remember to mention (Website name) when contacting your desired tradesman.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 4: Rate the Tradesmen</h4>
							<p>Once your job is complete, please leave a review for the tradesman based on the service you have received. If your tradesman has done a good job, don't forget that this will help other customers to make the right choice.</p>
							<p>It only takes a few moments to leave a review but it makes a massive difference for other customers like you, looking to hire a good, honest tradesman for their job.</p>
							<p>Leaving a review for the tradesman that carries out your job will mean that you are automatically entered for our prize draw.............</p>
						</div>
					</div>
				</div>
				<div class="span6"> 
					<div class="how-it-works well">
						<h2>How it works for tradesmen..</h2><br/>
						<div class="how-it-works-step">
							<h4>Step 1: Sign Up</h4>
							<p>Skilled tradesmen looking to broaden their horizon can sign up. There are two options a monthly subscription and a yearly subscription. <a class="#" data-toggle="modal" href="#myModal1">Find out more about subscription fees</a></p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 2: Complete a Company Profile</h4>
							<p>Give as many details of your company as you can, list all qualifications and if possible include photos of your previous work, the more a customer knows about you now the higher the possibility that you will be selected for their job.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 3: Pay Registration Fees</h4>
							<p>In order to finalise you registration you must choose one of the 2 payment options and pay the according subscription fees.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 4: Send us your Documents</h4>
							<p>Once a payment is made we will ask you to send over a minimum of three references, a copy of your public liability insurance, proof of any qualifications you have listed on your profile and a signed copy of our terms and conditions.</p>
						</div>
						<div class="how-it-works-step">
							<h4>Step 5: Customers Contact You!</h4>
							<p>Once all the documents have been sent over, your company profile is listed on (website name) and your now ready to go. Be patient and customers will contact you about their jobs!!</p>
						</div>
						<div class="how-it-works-button">
							<a class="btn btn-primary" href="register.html">Register Now</a>
						</div>
					</div>
				</div>
			</div>
		</section>
	
		<hr>

	</div>	
	<!--Container-->
	
	<footer>
		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="footer-links span3">
						<h4>Services</h4>
						<ul class="unstyled">								
							<li><a class="#" data-toggle="modal" href="#myModal2">FAQ's</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal3">Why Choose Us?</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal1">Registration Fees</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>More</h4>
						<ul class="unstyled">
							<li><a href="register.html">Sign Up</a></li>
							<li><a href="news.html">Latest News</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal4">Special Offers</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>Company</h4>
						<ul class="unstyled">
							<li><a href="contact.html">Contact Us</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal5">Privacy Policy</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal6">Terms & Conditions</a></li>
						</ul>
					</div>
					<div class="footer-links span2">
						<h4>Stay in touch</h4>
						<ul class="unstyled">
							<li><a class="twitter" href="#">Twitter</a></li>
							<li><a class="facebook" href="#">Facebook</a></li>
							<li><a class="google" href="#">Flickr</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<div class="footer-floor">
		<div class="container">
			<div class="row">
				<div class="footer-copyright">
					<div class="span2">
						<p></p>
					</div>
					<div class="span8">
						<p>&copy; Tradesmen-site.co.uk 2012. All Rights Reserved.</p>
					</div>
					<div class="span2">
						<a>Who built this website?</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!--Login modal-->
	<div class="modal fade hide login-modal" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Log in to (Website Name)</h3>
		</div>
		<div class="modal-body login-body">
			<div class="form-input form-inline">
				<label class="form-input-label">Username/Email:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label">Password:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<label class="checkbox ">
					<input type="checkbox"> Remember me on this computer
				</label>
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<a href="#" class="">Forgot your password?</a>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary">Log In</a>
			<a href="#" class="btn" data-dismiss="modal">Close</a>
		</div>
	</div>
	
	<!--Subscription modal-->
	<div class="modal fade hide" id="myModal1">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Subscription Fees</h3>
		</div>
		<div class="modal-body">
			<div class="subscription">
				<h4>Yearly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
			<div class="subscription">
				<h4>Monthly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
		</div>
		<div class="modal-footer">
			<a href="register.html" class="btn btn-primary">Register</a>
		</div>
	</div>
	
	<!--FAQ modal-->
	<div class="modal fade hide" id="myModal2">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>FAQ's</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Why us modal-->
	<div class="modal fade hide" id="myModal3">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Why Choose Us?</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Special Offers modal-->
	<div class="modal fade hide" id="myModal4">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Special Offers</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Privacy policy modal-->
	<div class="modal fade hide" id="myModal5">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Privacy Policy</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Terms & Condtions modal-->
	<div class="modal fade hide" id="myModal6">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Terms & Conditions</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>		
	
    <!--Bootstrap js files-->
    <script src="js/application.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

</body>
</html>
